<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>合成</title>
    <style>
        html{height: 100%;overflow: hidden}
        body{height: 100%;margin: 0;}
        #canvas{
            background: antiquewhite;
        }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    const canvas=document.getElementById('canvas');
    //canvas充满窗口
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;
    //画笔
    const  ctx=canvas.getContext('2d');

    /*全局合成
    * source-atop
    * source-in
    * source-out
    * source-over 默认
    * destination-atop
    * destination-in
    * destination-out
    * destination-over
    * lighter
    * copy
    * xor
    * */
    //正方形
    ctx.fillStyle='orange';
    ctx.fillRect(100,100,200,200);

    //设置全局合成属性
    ctx.globalCompositeOperation='destination-over';

    //圆2
    ctx.beginPath();
    ctx.arc(300,300,100,0,Math.PI*2);
    ctx.fillStyle='green';
    ctx.fill();

    // ctx.globalCompositeOperation='destination-out';

    //圆3
    /*ctx.beginPath();
    ctx.arc(300,400,100,0,Math.PI*2);
    ctx.fillStyle='maroon';
    ctx.fill();*/

    //圆4
    /*ctx.beginPath();
    ctx.arc(300,500,100,0,Math.PI*2);
    ctx.fillStyle='yellow';
    ctx.fill();*/

    /*
    * 两个图形
    *   第一个：已经绘制到canvas 中的图形
    *   第二个：即将绘制
    * */

</script>
</body>
</html>
